<template>
  <div id="indexcontentmap">
    <div v-for="(item,index) in content" :key="index" class="box">
      <img :src="img[index]" alt />
      <span>{{item.content}}</span>
      <p>{{item.jieshao}}</p>
      <div class="money">
        <span>￥{{item.newprice}}</span>
        <strong>￥{{item.oldprice}}</strong>
        <i class="icon iconfont icon-gouwuche" @click="caradd(item)"></i>
      </div>
    </div>
    <!-- <p>{{content}}</p> -->
  </div>
</template>
<script>
export default {
  props: ["content", "img"],
  data() {
    return {};
  },
  methods: {
    caradd(v) {
      // this.$emit("addcar",this.index)
      var _this = this;
      var url = "http://localhost:3000";
      _this.$axios
        .post(url + "/index/addcar",{
          data:v,
        })
        .then(response => {
          if(response.data.code==200){
            window.alert("添加购物车成功")
          }else{
            window.alert("添加购物车失败")
          }
        })
        .catch(error => {
          window.console.log(error);
        });
    }
  }
};
</script>
<style scoped>
#indexcontentmap {
  width: 80%;
  margin: auto;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.box {
  width: 20%;
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
  border: 1px solid #ececec;
}
.box span {
  font-size: 16px;
}
.box p {
  font-size: 14px;
  color: #b7b7b7;
  margin: 0px;
  padding: 0px;
  margin: 10px 0px;
}
.money {
  font-size: 14px;
  color: #ff5757;
  margin: 8px 0px;
  overflow: hidden;
}
.money strong {
  margin-left: 5px;
  text-decoration: line-through;
  color: #666;
}
.money i {
  font-size: 26px;
  float: right;
  color: #f08201;
}
#map img {
  width: 100%;
  height: 230px;
}
</style>